<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        li{
            list-style: none;
        }
        #box{
            width: 1226px;
            height: 460px;
            margin: 100px auto 0;
            position: relative;
        }
        #box .img{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
        }
        #box .img1{
            display: block;
        }
        #box .list{
            width: 234px;
            height: 460px;
            background: rgba(105,101,101,.6);
            position: absolute;
            left: 0;
            top: 0; 
        }
        #box .list ul{
            margin:20px 0;
            padding-left: 0;
        }
        #box .list ul li{
            line-height: 44px;
            font-size: 14px;
            padding-left: 30px;
        }
         #box .list ul a{
            color: white;
         }
         #box .list ul li span{
            color: #c0c0c0;
            float: right;
            position: absolute;
            left: 204px;

         }
        #box .list ul li div{
            width: 992px;
            height: 460px;
            background: white;
            position: absolute;
            display: none;
            top: 0;
            left: 234px;
            z-index: 999;   
        }
        #box .list ul li:hover{
            /* cursor: pointer; */
            background: #ff6700;
        }
        #box .list ul li:hover div{
            display: block;
        }
        #box .prev{
            width: 41px;
            height: 69px;
            background: url('./resource/pre.png')-83px 0px;
            position: absolute;
            left: 234px;
            top: 50%;
            transform: translateY(-50%);
        }
        #box .prev:hover{
            width: 41px;
            height: 69px;
            background: url('./resource/pre.png');
            position: absolute;
            left: 234px;
            top: 50%;
            transform: translateY(-50%);
        }
        #box .next{
            width: 41px;
            height: 69px;
            background: url('./resource/pre.png')-125px 0px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        #box .next:hover{
            width: 41px;
            height: 69px;
            background: url('./resource/pre.png')-208px 0px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        #box .nav{
            width: 140px;
            height: 30px;
            position: absolute;
            bottom: 20px;
            right: 30px;
        }
        #box .nav ul li{
            width: 6px;
            height: 6px;
            border: hsla(0,0%,100%,.3) 2px solid;
            background: rgba(0,0,0,.4);
            float: left;
            margin-right: 10px;
            border-radius: 100%;
        }
        #box .nav ul li:hover{
            border-color: rgba(0,0,0,.4);
            background-color: hsla(0,0%,100%,.3);
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div id="box">
        <img src="resource/1.jpg"  class="img img1" width="100%">
        <img src="resource/1.webp" class="img img2"  width="100%">
        <img src="resource/2.webp" class="img img3"  width="100%">
        <img src="resource/3.webp" class="img img4"  width="100%">
        <img src="resource/4.webp" class="img img5"  width="100%">
        <div class="list">
            <ul>
                <a href=""><li>
                        手机 电话卡
                        <span>&gt;</span>
                        <div>1</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        电视 盒子
                        <span>&gt;</span>
                        <div>2</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        笔记本 显示器 平板
                        <span>&gt;</span>
                        <div>3</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        家电 插线板
                        <span>&gt;</span>
                        <div>4</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        出行 穿戴
                        <span>&gt;</span>
                        <div>5</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        智能 路由器
                        <span>&gt;</span>
                        <div>6</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        电源 配件
                        <span>&gt;</span>
                        <div>7</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        健康 儿童
                        <span>&gt;</span>
                        <div>8</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        耳机 音箱
                        <span>&gt;</span>
                        <div>9</div>
                    </li>
                </a>
                <a href="">
                    <li>
                        生活 箱包
                        <span>&gt;</span>
                        <div>10</div>
                    </li>
                </a>
            </ul>
        </div>
        <div class="prev"></div>
        <div class="next"></div>
        <div class="nav">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    
</body>
</html>